
.progress-bar {
  position: fixed;
  top: 0;
  left: 0.75em;
  right: 0;
  height: 10px;
  transform-origin: 50%;
  z-index: 9999;
}


.text-container{

 .anim-text-flow,
.anim-text-flow-hover:hover {

  $animationSteps: 20;
  $animationDuration: 50;
  $animationElement: span;
  $animationElementsCount: 100;
  $delayBetweenLetters: 0.2;


  #{$animationElement} {
    animation-name: anim-text-flow-keys;
    animation-duration: #{$animationDuration}s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }

  @keyframes anim-text-flow-keys {
    @for $i from 0 through $animationSteps {
      #{percentage($i * calc(1 / $animationSteps))} {
        color: hsla(random(365), 60%, 60%, 1);
      }
    }
  }

  $totalDelayTime: $animationElementsCount * $delayBetweenLetters;

  @for $i from 1 through $animationElementsCount {
    #{$animationElement}:nth-of-type(#{$i}) {
      animation-delay: #{($i * $delayBetweenLetters) - $totalDelayTime}s;
    }
  }
}




.txt {
  display: block;
  font-size: 1em;
}
}
